<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-text指令</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        v-bind : 单向绑定解析表达式，可简写为 :xxx
        v-model : 双向数据绑定
        v-for : 遍历数组、字符串、对象、循环次数
        v-on : 绑定事件监听，可简写为 @
        v-if : 条件渲染(动态控制结点是否存在)
        v-else : 条件渲染(动态控制结点是否存在)
        v-show : 条件渲染(动态控制结点是否展示)
        v-text 指令：
            作用：想起所在的节点中渲染文本内容；
            与插值语法的区别：v-text 会替换节点中的内容，{{xx}} 则不会。
    -->
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>{{name}}</h1>
        <h1 v-text="name"></h1>
        <h1 v-text="str"></h1>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
            name:'张三',
            str:'<h1>你好啊</h1>'
        }
    })
</script>
</html>